import cardItem from './cardItem.js' // 小说item组件
import formView from './formView.js' // form添加修改组件
import delItem from './delItem.js' //回收站组件
import seaRch from './search.js' // 搜索组件
import exportFile from './exportFlie.js'
import { http, message, codeform, codeData, filterTitle, getbaseURL } from './utlis.js'

const { createApp, ref, reactive } = Vue
// 总数据
export let NOVEL_DATA = []
// 本地总数据
export let NOVEL_LOCAL_DATA = []

export const baseURL = getbaseURL()
console.log(baseURL)

export const LOCAL_KEY = {
	NOVEL_DATA: 'NOVEL_DATA', //在数据库中的
	NOVEL_LOCAL_DATA: 'NOVEL_LOCAL_DATA', //本地保存的
}

export const form = reactive({
	isshow: false,
	ison: true, // true添加 false修改
	data: {
		url: '', //首页url
		chapterUrl: '', //后续章节url
		title: '', //小说名
		chapter: '', // 章节数
		duwan: '0', //是否读完 0='未完' 1='读完'
		recommended: '0', // 是否是推荐 0='小说'  1='推荐'
		beizhu: '', //备注
		isdel: 1, //删除字段 0 删除 1显示  没有真实删除 就隐藏与显示
		islocal: false, // 是否是本地记录 true是本地 false是数据库
	},
})

export const state = reactive({
	tuiJianlist: [], // 推荐
	duwulist: [], // 以读完
	weidulist: [], // 未读完
	dellist: [], //删除的
})

export const addfilter = data => {
	if (data.isdel && data.isdel == 0) {
		state.dellist.push(data)
		return
	}
	if (data.recommended == 1) {
		state.tuiJianlist.push(data)
	} else if (data.duwan == 1) {
		state.duwulist.push(data)
	} else if (data.duwan == 0) {
		state.weidulist.push(data)
	}
}

export const getStateKey = data => {
	let key = null
	if (data.recommended == 1) {
		key = 'tuiJianlist'
	} else if (data.duwan == 1) {
		key = 'duwulist'
	} else {
		key = 'weidulist'
	}
	return key
}

export const stateoperation = {
	delItem(key, data) {
		const index = state[key].findIndex(vi => vi.title === data.title)
		state[key].splice(index, 1)
	},
	updateItem(key, data) {
		const index = state[key].findIndex(vi => vi.title === data.title)
		state[key].splice(index, 1, data)
	},
	addItem(data) {
		addfilter(data)
	},
}

/**
 * @param 用于保存修改前的item数据
 * 由于使用了本地的存储 额数据库的id为自增 本地不好控制id
 * 所以使用了 title 来进行比较或查询
 * 所以在修改前就必须保存一分旧的小说item数据
 *
 */
export const oidForm = {
	data: {},
	setdata(data) {
		this.data = data
	},
}

/* --------------------------------------------- 公共数据-方法 上---------------------------------------------*/

/** 更新数据库的数据 随便在初始化数据 **/
async function init() {
	NOVEL_LOCAL_DATA = JSON.parse(localStorage.getItem(LOCAL_KEY.NOVEL_LOCAL_DATA)) || []
	try {
		// 更新记录
		if (NOVEL_LOCAL_DATA.length > 0) {
			const bodylist = NOVEL_LOCAL_DATA.map(v => codeform(v))
			await http('/novel/update', bodylist, 'POST')
			NOVEL_LOCAL_DATA.length = 0
			localStorage.removeItem(LOCAL_KEY.NOVEL_LOCAL_DATA)
		}
		NOVEL_DATA = await http('/novel')
		localStorage.setItem(LOCAL_KEY.NOVEL_DATA, JSON.stringify(NOVEL_DATA))
		message('更新数据完成')
	} catch (error) {
		NOVEL_DATA = JSON.parse(localStorage.getItem(LOCAL_KEY.NOVEL_DATA)) || []
		message('更新失败，使用本地数据')
	}
	const res = [...NOVEL_DATA, ...NOVEL_LOCAL_DATA]
	return codeData(res)
}

export const app = {
	components: { cardItem, formView, delItem, seaRch, exportFile },
	setup() {
		init().then(res => {
			res.forEach(it => {
				if (it?.isdel == 1) {
					addfilter(it)
				} else {
					state.dellist.push(it)
				}
			})
		})

		function scrolltop() {
			window.scrollTo({ top: 0, behavior: 'smooth' })
		}

		function scrollbotton() {
			window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
		}

		const toolsShow = ref(true)

		function toolsclk() {
			toolsShow.value = !toolsShow.value
		}

		function appadd() {
			form.data = {
				url: '',
				chapterUrl: '',
				title: '',
				chapter: '',
				duwan: '0',
				recommended: '0',
				beizhu: '',
				islocal: false,
				isdel: 1,
			}
			form.ison = true
			form.isshow = true
		}

		/** 表单添加或修改 **/
		async function appSubmit() {
			if (form.data.title === '') {
				message('小说名不能为空')
				return
			}

			const body = codeform(form.data)
			// 添加
			if (form.ison) {
				debugger
				if (filterTitle([...NOVEL_DATA, ...NOVEL_LOCAL_DATA], form.data.title)) {
					message('小说名不能相同')
					return
				}
				// 请求成功就合并在总数据中
				try {
					const request = await http('/novel/insert', body, 'POST')
					form.data.id = request.id
					NOVEL_DATA.push(form.data)
					addfilter(form.data)
					// 更新数据库缓存数据
					localStorage.setItem(LOCAL_KEY.NOVEL_DATA, JSON.stringify(NOVEL_DATA))
					message('添加成功')
				} catch (e) {
					// 请求失败  数据先保存在本地
					form.data.islocal = true
					NOVEL_LOCAL_DATA.push(form.data)
					// 更新子组件数据 （更新页面）
					addfilter(form.data)
					// 更新本地数据
					localStorage.setItem(LOCAL_KEY.NOVEL_LOCAL_DATA, JSON.stringify(NOVEL_LOCAL_DATA))
					message('添加失败，保存本地')
				}
			} else {
				// 修改后更新页面  更新本地数据
				const updateview = (yuan, xindata) => {
					// 因为列表是state中的三个数组，所以要移动到其他的数组就要获取state的key才能push
					// 修改前的key
					const yuankay = getStateKey(yuan)
					// 修改后的key
					const key = getStateKey(xindata)
					const yuanindex = state[yuankay].findIndex(kv => kv.title === xindata.title)
					// 通过判断key来知道修改后的数据是否换位置  比如小说未读完 修改成了读完  小说修改为推荐  推荐改小说
					if (yuankay === key) {
						state[key].splice(yuanindex, 1, xindata)
					} else {
						// 换了位置就要先删原来所在的item
						state[yuankay].splice(yuanindex, 1)
						// 往新的数组中添加
						addfilter(xindata)
					}
					// 更新本地数据
					localStorage.setItem(LOCAL_KEY.NOVEL_LOCAL_DATA, JSON.stringify(NOVEL_LOCAL_DATA))
					// 更新数据库缓存数据
					localStorage.setItem(LOCAL_KEY.NOVEL_DATA, JSON.stringify(NOVEL_DATA))
				}

				let yuandata = null
				// 修改
				try {
					const request = await http('/novel/update', body, 'POST')
					const index = NOVEL_DATA.findIndex(nv => nv.title === oidForm.data.title)
					yuandata = NOVEL_DATA[index]
					if (request.length > 0) {
						form.data.id = request[0].id
						NOVEL_DATA[index].id = request[0].id
					}
					updateview(yuandata, form.data)
				} catch (e) {
					// 请求失败
					// 判断是本地数据
					if (form.data.islocal) {
						const index = NOVEL_LOCAL_DATA.findIndex(v => v.title === oidForm.data.title)
						yuandata = NOVEL_LOCAL_DATA[index]
						NOVEL_LOCAL_DATA[index] = codeData(form.data)
					} else {
						// 不是本地的  先删除数据库缓存数据 在保存到本地记录
						const index = NOVEL_DATA.findIndex(nv => nv.title === oidForm.data.title)
						yuandata = NOVEL_DATA[index]
						NOVEL_DATA.splice(index, 1)
						form.data.islocal = true
						NOVEL_LOCAL_DATA.push(codeData(form.data))
					}
					// 更新页面
					updateview(yuandata, form.data)
					message('修改失败，保存本地')
				}
			}
			form.isshow = false
			form.ison = false
		}

		/** 删除小说 **/
		async function appcarddel(item) {
			// 更新页面，更新本地数据
			const delitem = data => {
				// 获取data所在的key
				const key = getStateKey(data)
				const keyindex = state[key].findIndex(kv => kv.title === data.title)
				// 删除state中item
				state[key].splice(keyindex, 1)
				// 添加到删除数组
				state.dellist.push(data)
				// 更新本地数据
				localStorage.setItem(LOCAL_KEY.NOVEL_LOCAL_DATA, JSON.stringify(NOVEL_LOCAL_DATA))
				// 更新数据库缓存数据
				localStorage.setItem(LOCAL_KEY.NOVEL_DATA, JSON.stringify(NOVEL_DATA))
			}

			try {
				const request = await http(
					'/novel/update',
					{
						isdel: 0,
						id: item.id,
					},
					'POST'
				)
				// 修改数据库缓存数据
				const index = NOVEL_DATA.findIndex(v => v.title === item.title)
				NOVEL_DATA[index].isdel = 0
				if (request.length > 0) {
					item.id = request[0].id
					NOVEL_DATA[index].id = request[0].id
				}
				delitem(item)
				message('删除成功')
			} catch (error) {
				// 请求失败
				// 判断是本地数据
				if (item.islocal) {
					const index = NOVEL_LOCAL_DATA.findIndex(v => v.title === item.title)
					NOVEL_LOCAL_DATA[index].isdel = 0
				} else {
					// 不是本地的  先删除数据库缓存数据 在保存到本地记录
					const index = NOVEL_DATA.findIndex(nv => nv.title === item.title)
					NOVEL_DATA.splice(index, 1)
					item.isdel = 0
					item.islocal = true
					NOVEL_LOCAL_DATA.push(codeData(item))
				}
				delitem(item)
				message('删除失败，本地保存')
			}
		}

		return {
			toolsShow,
			state,
			toolsclk,
			appadd,
			scrolltop,
			scrollbotton,
			appSubmit,
			appcarddel,
		}
	},
}

const vue = createApp(app)
vue.use(ElementPlus)
vue.mount('#app')
